<template>
	<view>
		<view class="head">值机人员需每月进行开机汇报</view>
		<view class="" style="margin: 20rpx 20rpx;">
			<u-textarea height="300" v-model="report.content" placeholder="请输入内容" ></u-textarea>
		</view>
		
		<view class="" style="margin: 20rpx 20rpx;">
			<view style="margin-bottom: 20rpx;">上传图片</view>
			<view class="" style="display: flex;flex-wrap: wrap;">
				<view class="" style="position: relative;width: 200rpx;margin: 10rpx	;" v-for="(img,index) in fileList1" :key="index">
					<image  style="width: 200rpx;height:200rpx;" :src="baseUrl + img" mode="">
					</image>
					<u-icon color="red" style="position: absolute;right: -10px;top: -10px;" @click="delImg(index)" name="close" size="25"></u-icon>
				</view>
				<view class="add-img" style="display: flex;margin: 10rpx;justify-content: center;align-items: center;" @click="upload()">
					<image  style="width: 60rpx;height:60rpx;" src="../../static/imgs/add.png" mode="">
					</image>
				</view>
			</view>
		</view>
		<view class="" style="position: fixed;left: 0;bottom: 20rpx;width: 100%;">
			<view class="" style="margin: 0 20rpx;">
				<u-button type="primary" @click="submit" text="提交"></u-button>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mark:'',
				fileList1:[],
				report:{
					content:'',
					imgs:'',
					type:'month',
				},
			}
		},
		methods: {
			submit(){
				this.report.imgs = this.fileList1.join(',');
				this.$api.report.add(this.report).then(res => {
					if (res.code == 1) {
						this.$u.toast('添加成功');
					}
				
				})
			},
			delImg(index){
				this.fileList1.splice(index,1)
			},
			upload() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						tempFilePaths.forEach((item) => {
							uni.uploadFile({
								url: this.baseUrl + '/api/common/upload', // 你的上传接口地址
								filePath: item,
								header: {
									token: this.token
								},
								name: 'file', // 这里根据后端需要的字段来定义
								formData: {
									'user': 'test' // 其他要传的参数
								},
								success: (uploadFileRes) => {
									let data = JSON.parse(uploadFileRes.data);
									if (data.code == 1) {
										this.fileList1.push(data.data.url) 
										this.$u.toast(data.msg)
									} else {
										this.$u.toast(data.msg)
									}
									// 处理上传成功的结果
								},
								fail: (uploadFileErr) => {
									// 处理上传失败的情况
								}
							});
						} )
					}
				});
			},
		}
	}
</script>

<style scope>
	.head {
		background: #d9e2fd;
		padding: 0 20rpx;
		color: #426ef6;
		font-family: "PingFang SC";
		font-size: 28rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 43.12rpx;
	}
	.add-img{
		width: 200rpx;
		height: 200rpx;
		flex-shrink: 0;
		border-radius: 12rpx;
		border: 2rpx solid #ddd;
		/* opacity: 0.7; */
	}
</style>
